<template>
	<view>
		<Linex></Linex>
		<view class="list">
			<!-- 左侧 -->
			<scroll-view scroll-y="true" class="list-left" :style="'height:'+clentHeight+'px;'">
				<view v-for="(item,index) in leftData" :key="index" 
				class="left-item" 
				@tap="changeLeftTab(index,item.id)">
					<view class="left-name"
					:class="activeIndex === index ? 'left-name-active':''"
					>{{item.name}}</view>
				</view>
			</scroll-view>
			<!-- 右侧 -->
			<scroll-view scroll-y="true" class="list-right" :style="'height:'+clentHeight+'px;'">
				<view v-for="(item,index) in rightData" 
				:key="index" 
				class="right-list">
				<block v-for="(a,i) in item" :key="i">
					<view class="list-title">{{a.name}}</view>
					<view class="right-content">
						<view class="right-item" v-for="(b,i) in a.list" :key="i">
							<image class="right-img" :src="b.imgUrl" mode="" @tap="golist(b.id)"></image>
							<view class="right-name">{{b.name}}</view>
						</view>
						
						<!-- <view class="right-item">
							<image class="right-img" src="../../static/img/2.webp" mode=""></image>
							<view class="right-name">mss</view>
						</view> -->
						
					</view>
				</block>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
import http from "@/common/api/request.js"	
import Linex from "@/components/common/line.vue"	
	export default {
		components:{
			Linex
		},
		data() {
			return {
				clentHeight:0,
				activeIndex:0,
				leftData:[],
				rightData:[]
			}
		},
		onLoad() {
			this.getData()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clentHeight = res.windowHeight - this.getClientHeight()
				}
			})
		},
		methods: {
			//获取可视高
			getClientHeight(){
				const res = uni.getSystemInfoSync()
				const system = res.platform
				if(system === 'ios'){
					return 44+res.statusBarHeight
				}else if(system === 'android'){
					return 48+res.statusBarHeight
				}else{
					return 0
				}
			},
			changeLeftTab(index,id){
				//注意顺序执行顺序
				this.getData(id)
				this.activeIndex = index
				
			},
			//请求数据
			getData(id){
				//请求左侧另一项数据
				if(id == (this.activeIndex+1)){
					return
				}
				http.request({
					url:'/goods/list'
				}).then(res=>{
					let leftData = []
					let rightData = []
					res.forEach(v =>{
						leftData.push({
							id:v.id,
							name:v.name
						})
						//根据选中的下标+1则对应其id值
						if(v.id == (this.activeIndex+1)){
							rightData.push(v.data)
						}
					})
					
					this.leftData = leftData
					this.rightData = rightData
				})
			},
			golist(id){
				uni.navigateTo({
					url:'/pages/details/details?id='+ id
				})
			}
		},
		// input输入框点击事件
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'/pages/search/search'
			})
		}
	}
</script>

<style scoped>
.list{
	display: flex;
}
.left-item{
	border: 2rpx solid #ffffff;
	font-size: 28rpx;
	background-color: #f7f7f7;
}
.left-name{
	padding: 30rpx 6rpx;
	font-weight: 700;
	text-align: center;
}
.left-name-active{
	border-left: 8rpx solid #49bdfb;
	background-color: #ffffff;
}
.list-left{
	flex: 1;
}
.list-right{
	flex: 3;
	padding: 30rpx;
}

.list-title{
	font-weight: bold;
	padding: 30rpx 0;
}
.right-item{
	width: 150rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10rpx;
}
.right-content{
	display: flex;
	flex-wrap: wrap;
}
.right-name{
	padding: 16rpx 0;
}
.right-img{
	width: 150rpx;
	height: 150rpx;
}
</style>
